      
<template>
  <div class="baseList">

    <div class="newBox">
        <button class="bt wt-120" @click="handleBulid()">
            新增护理项目
        </button>
    </div>

    <div class="tableBoxs">

      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table row-key="index" 
      :data="data" :columns="COLUMNS" 
      :stripe="stripe" :bordered="bordered" :hover="hover"
        :table-layout="tableLayout ? 'auto' : 'fixed'" :size="size" :show-header="showHeader" cell-empty-content="-"
        resizable lazy-load>

        <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
        <!--#image变量 代表 row  一行数据 -->
        <template #image="{ row }">
          <div>
            <div class="tdesign-demo-image-viewer__base">
              <!-- image-viewer预览框 -->
              <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image">
                    <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                      <span>
                        <BrowseIcon size="1.4em" /> 预览
                      </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
          </div>
        </template>


        <template #price="{ row }">{{ isDecimals(row.price) ? row.price : row.price + '.00' }}</template>

        <template #op="{ row }">

          <t-space direction="vertical">
            <t-space>
              <t-link theme="danger" hover="underline"> 删除 </t-link>
              <t-link theme="success" hover="underline"> 编辑 </t-link>
              <t-link theme="danger" hover="underline"> 禁用 </t-link>

            </t-space>

          </t-space>
        </template>
      </t-table>
    </div>
    <t-pagination
    v-model="pagination.pageNum"
    v-model:pageSize="pagination.pageSize"
    :total="pagination.total"
    @change="onPageChange"
  />
  </div>

</template>

<script lang="tsx" setup>
import { ref } from 'vue';
import { TableProps,PaginationProps } from 'tdesign-vue-next';

import { COLUMNS } from '../constants';
import { number } from 'echarts';

//  是父传过来的，子直接用
const props = defineProps({
data: {
    type: Object,
    default: () => {
        return {}
    }
},
// 总条数
total: {
    type: Number,
    default: 0
},
pagination: {
    type: Object,
    default: () => {
        return {}
    }
}
})



// 表格的样式
const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref<TableProps['size']>('medium');
const showHeader = ref(true);





// 小数判断
// 写一个小数判断方法，如果是小数返回true 否则返回false
const isDecimals = (num: number): boolean => {

let count = 3;
console.log("判断是否是小数：", Number(count) % 1 !== 0)


return Number(num) % 1 !== 0;
}



// 子组件需要调用父组件的方法
//声明方法
const emit = defineEmits([
'onPageChange','handleBulid'
])
//新增按钮
const handleBulid = () =>{
emit('handleBulid')
console.log("表格页面接到了点击新增按钮事件")
}
//点击翻页
const onPageChange = (val) => {
emit('onPageChange', val)
}



</script>


